<template>
  <view>
    <button open-type="getUserInfo" @getuserinfo="getUserBtn" type="primary">微信登录</button>
  </view>
</template>

<script>
export default {
  onLoad () {
    this.getUserData()
  },
  methods: {
    // 登录 => 调用后台接口
    async login (userInfo) {
      // 获取后台登录接口需要的参数 
      /**
       * 需要的参数
       * 1. code 用户凭证 
       * 2. 微信用户的账号信息
       */
      // 获取code 用户凭证 
      const [error, code] = await uni.login()
      console.log(error, code, userInfo)
      // 获取微信用户的账号信息
      const { encryptedData, iv, rawData, signature } = userInfo
      // 调用接口
      const { msg: { msg, status }, data } = await this.request({
        url: '/api/public/v1/users/wxlogin',
        method: 'post',
        data: {
          code: code.code,
          encryptedData, iv, rawData, signature
        }
      })
      // console.log(res)
      // 登录成功
      if (status === 200) {
        // 存储token
        uni.setStorage({
          key: 'hm_token',
          data: data.token,
        })
        // 返回结算页
        uni.navigateBack()
      } else {
        uni.showToast({
          title: msg,
          duration: 2000
        })
      }

    },
    // 通过btn形式获取用户信息
    getUserBtn (res) {
      // console.log('btn', res)
      this.login(res.detail)
    },
    // 通过api形式获取用户信息
    async getUserData () {
      // 获取微信账号信息=> 需要用户手动授权
      // 现在：不会弹出授权窗口=》如果之前用户没有授权过，就会调用失败
      // uni.getUserInfo({
      //   success: (res) => {
      //     console.log('api', res)
      //   },
      //   fail: (res) => {
      //     console.log('error:', res)
      //   }
      // })
      // 获取用户授权的数据
      let [err, set] = await uni.getSetting()
      console.log(err, set)
      if (!err && set.authSetting['scope.userInfo']) {
        // 已经获取用户授权=》获取个人账号信息
        let [error, userData] = await uni.getUserInfo()
        // console.log('api', error, userData)
        if (!error) {
          console.log('api', error, userData)
          this.login(userData)
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
button {
  width: 600rpx;
  margin: 200rpx auto 0;
}
</style>